<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.事件委托</title>
</head>

<body>
    <ul class="menu">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>
<script>
    var lis = document.getElementsByTagName('li')
    console.log(lis)
    // for(var i=0;i<lis.length;i++){
    //     lis[i].index=i//手动添加索引
    //     lis[i].onclick=function(e){
    //         //this是当前点击的某个对象
    //         console.log('li添加事件'+this.index)
    //         this.style.color='pink'
    //         lis[this.index].style.color='blue'
    //     }
    // }
    //事件委托/代理：原本给子元素设置相同事件，现在设置给父元素
    //getElementsByClassName当中Elements有s需要在后面加索引[]
    var menu = document.getElementsByClassName('menu')[0]
    menu.onclick = function (e) {
        console.log(this);
        console.log(e);
        console.log('触发点击')
        //获取当前事件对象
        console.log(e.target)
        //也是当前事件对象
        console.log(e.srcElement)
        //两个方法通过获取对象改变style都能实现效果改变
        e.target.style.color = "pink"
        // e.srcElement.style.color = 'red'
        //获取绑定事件的对象
        console.log(e.currentTarget)//这里获取到了父元素
    }

    // menu.addEventListener('click', (e) => {
    //     console.log(this)
    //     console.log('触发点击')
    //     //获取当前事件对象
    //     console.log(e.target)
    //     //也是当前事件对象
    //     console.log(e.srcElement)
    //     //两个方法通过获取对象改变style都能实现效果改变
    //     e.target.style.color = "pink"
    //     // e.srcElement.style.color = 'red'
    //     //获取绑定事件的对象
    //     console.log(e.currentTarget)//这里获取到了父元素
    // })  
</script>

</html>